    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>旋转3D导航栏</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                width: 700px;
                height: 300px;
                margin: 100px auto;
                /*background:#cccccc ;*/
            }
            ul li{
                list-style: none;
                width: 100px;
                height: 36px;
                /*border: 1px solid #000;*/
                float: left;
                /*margin-right: 20px;*/
                position: relative;
                /*transform: rotateX(30deg) rotateY(-131deg);*/
                transform-style: preserve-3d;
                transition: all 0.6s;
                /*transform: translateZ(18px);*/
            }
            li span{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                /*display: block;*/
                text-align: center;
                line-height: 36px;
            }
            li span:nth-child(1){
                /*left: 50px;*/
                background: #0A7EC3;
                transform: translateZ(18px);
            }
            li span:nth-child(2){
                transform-origin: top;
                background: #c34a6d;
                transform: rotateX(90deg) translateY(-18px);
            }
            ul:hover li{
                transform: rotateX(-90deg);
            }
            ul:hover li:nth-child(2){
               transition-delay: 0.2s;
            }
            ul:hover li:nth-child(3){
                transition-delay: 0.4s;
            }
            ul:hover li:nth-child(4){
                transition-delay: 0.6s;
            }
            ul:hover li:nth-child(5){
                transition-delay: 0.8s;
            }
        </style>
    </head>
    <body>
    <ul>
        <li>
            <span>我是中国人</span>
            <span>我爱中国</span>
        </li>
        <li>
            <span>我是中国人</span>
            <span>我爱中国</span>
        </li>
        <li>
            <span>我是中国人</span>
            <span>我爱中国</span>
        </li>
        <li>
            <span>我是中国人</span>
            <span>我爱中国</span>
        </li>
        <li>
            <span>我是中国人</span>
            <span>我爱中国</span>
        </li>
    </ul>
    </body>
    </html>